<template>
  <div>
    <el-table
      :data="cardList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">

      <el-table-column
        label="Id"
        prop="id">
      </el-table-column>

      <el-table-column
        label="姓名"
        prop="name">
      </el-table-column>

      <el-table-column
        label="手机号"
        prop="mobile">
      </el-table-column>


      <el-table-column
        label="公司"
        prop="company">
      </el-table-column>

<!--      <el-table-column-->
<!--        label="职位"-->
<!--        prop="position">-->
<!--      </el-table-column>-->

<!--      <el-table-column-->
<!--        label="出生日期"-->
<!--        prop="birthday">-->
<!--      </el-table-column>-->


      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleLook( scope.row)">查看</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleLike(scope.row)">喜欢</el-button>
        </template>
      </el-table-column>
    </el-table>


    <!--  分页显示  -->
    <div :class="pageClass">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--  弹框  -->
    <el-dialog
      title="查看名片"
      :visible.sync="dialogVisible"
      width="30%">
      <p>ID: {{ cardInfo.id }}</p>
      <p>名字: {{ cardInfo.name }}</p>
      <p>性别: {{ cardInfo.sex }}</p>
      <p>公司: {{ cardInfo.company }}</p>
      <p>职位: {{ cardInfo.position }}</p>
      <p>手机: {{ cardInfo.mobile }}</p>
      <p>浏览量: {{ cardInfo.visited }}</p>
      <p>出生日期: {{ cardInfo.birthday }}</p>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="handleClose">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "CardList",

  data() {
    return {
      user: this.$store.getters.getUser, // 获取了登录人的信息
      msg: '卡片列表',


      dialogVisible: false,


      search: '',

      cardList: [],

      cardInfo:{
        birthday: "",
        company: "",
        id: "",
        mobile: "",
        name: "",
        position: "",
        sex: "",
        visited: ""
      },

      pageClass:"myPage", //自定义的分页样式
      currentPage:1, // 默认显示的第几页
      pageSize:5,//每页显示几条数据,真实是数据是后端返回的
      total:10,  //总共多少条数据,真实是数据是后端返回的

    }
  },

  methods: {

    // 每页显示几条数据
    handleSizeChange(pageSize) {
      // 查询用户列表
      this.queryCardList(this.currentPage, pageSize);
    },
    // 切换第几页
    handleCurrentChange(pageIndex) {
      // 查询用户列表
      this.queryCardList(pageIndex, this.pageSize);
    },
    //封装的查询用户的方法 刷新页面列表   pageIndex第一个参数是查看第几页 pageSize第二个参数是每页显示几条数据
    queryCardList(pageIndex,pageSize) {
      let vm = this;
      this.axios({
        method: 'GET',
        url:`http://localhost:9090/card/page?pageIndex=${pageIndex}&pageSize=${pageSize}`,

      }).then(function (res){
        // 获取名片列表
        let list = res.data.data.list;
        console.log(list);

        vm.cardList = list;
        vm.total = res.data.data.total;
        vm.pageSize = res.data.data.pageSize;
        vm.currentPage = res.data.data.pageNum;
      });
    },

    handleLook(row) {
      let vm = this;
      this.axios({
        url: `http://localhost:9090/card/query/${row.id}`,
        method: 'GET'
      }).then(function (res) {
        vm.cardInfo = res.data.data;
      });
      this.dialogVisible = true;
    },
    handleClose() {
      // 对话框关闭的时候 重新查询了名片列表
      this.queryCardList(this.currentPage, this.pageSize);
      this.dialogVisible = false;
    },
    // 处理喜欢/不喜欢/删除喜欢的名片
    handleLike(row) {
      // row 就是你点击的当前行的名片
      let vm = this;
      // 当前登录人喜欢的名片列表liked中有没有当前行这个名片
      let likeOrUnLike = vm.user.liked.indexOf(row.id) === -1;
      console.log(likeOrUnLike);
      this.axios({
        url: `http://localhost:9090/user/like?uid=${vm.user.id}&cid=${row.id}&like=${likeOrUnLike}`,
        method: 'GET'
      }).then(function (res) {
        console.log(res.data.data);
        // 更新当前页面上的用户对象
        vm.user = res.data.data;
        vm.$store.commit("updateUser", res.data.data);
        vm.queryCardList(vm.currentPage, vm.pageSize);
      });
    },

  },

  mounted() {
//页面挂载完成后 查询用户
    this. queryCardList(this.currentPage,this.pageSize);

  }
}
</script>

<style scoped>
.myPage {
  margin-top: 40px;
  text-align: center;
}
</style>
